<%@ include file="/WEB-INF/common/logintaglibs.jsp" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <body>

        <div id="login-view" class="k-header window-section">
            <h1>Work Allocation System</h1>
            <form  action="<c:url value='j_spring_security_check' />"
                   method='POST' autocomplete="on"> 
                <c:if test="${not empty error}"> 

                    <span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" data-for="search" role="alert"><strong>Login Error.</strong> Caused by: ${sessionScope["SPRING_SECURITY_LAST_EXCEPTION"].message}</span>
                </c:if>
                <label for="j_username">Username:</label><input name='j_username' required="required" class="k-textbox" type="text" placeholder="mysuperusername">
                <label for="j_password">Password:</label><input name='j_password' required="required" class="k-textbox" type="password" >
                <button id="loginButton" class="k-button">Login</button>
            </form>
        </div>
    </body>
    <style>
        #loginButton{
            width:100%;
            margin-bottom: 20px;
        }
        #login-view label {
            font-size: 1em;
            font-weight: bold;
            margin: 25px 0 8px;
            width:100%;
            /*margin-top:10px;*/
        }
        #login-view input[type="text"],#login-view input[type="password"] {
            width:100%;   
            margin-bottom: 10px;
        }
        #login-view span{
            width: 100%;
        }
        #login-view {
            border-radius: 10px 10px 10px 10px;
            border-style: solid;
            border-width: 1px;
            overflow: hidden;
            width: 300px;
            margin: 30px auto;
            padding: 20px 20px 0 20px;
        }
        #login-view h1{
            border-bottom: 1px solid #DFDFDF;
            font-size:14px;
        }

        .window-section
        {
            margin: 0 auto 20px auto;
            padding: 10px;
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
            box-shadow: 0 1px 2px rgba(0,0,0,0.5);
            border-width: 1px;
            border-style: solid;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            border-color: rgba(255,255,255,0.2);
            background: -moz-linear-gradient(top,  rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.07) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,0.07)));
            background: -webkit-linear-gradient(top,  rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.07) 100%);
            background: -o-linear-gradient(top,  rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.07) 100%);
            background: -ms-linear-gradient(top,  rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.07) 100%);
            background: linear-gradient(to bottom,  rgba(0,0,0,0.01) 0%,rgba(0,0,0,0.07) 100%);
        }

    </style>
</html>
